<template>
  <div class="historyquery">
    <el-row :style="{paddingBottom: 0}">
      <el-col>
        <dynForm :info-form="infoForm" :search-tags="searchTags" :select-list="selectList">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch">
            {{ $t("search") }}
          </el-button>
        </dynForm>
      </el-col>
    </el-row>
    <!-- 表单主体内容 -->
    <el-card class="box-card">
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
        <!--分页组件-->
        <pagination
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.size"
          @pagination="getList"
        />
      </el-row>
    </el-card>
  </div>
</template>
<script>
import Apis from '@/api/production/historyquery'
import mySetting from '@/mixins/mySetting'
export default {
  name: 'LotHoldHistory',
  mixins: [mySetting],
  data() {
    return {
      infoForm: {},
      searchTags: [
        { label: this.$t('lotId'), prop: 'lotId', tag: 'DynInput' },
        { label: this.$t('holdCode'), prop: 'holdCode', tag: 'DynInput' },
        { label: this.$t('callMESHold'), prop: 'callMESHold', tag: 'DynSelect' },
        { label: this.$t('timeInterval'), prop: '', tag: 'Dyndaterange', event: (value) => {
          this.infoForm.StartTrackinStamp = Array.isArray(value) ? value[0] : null
          this.infoForm.EndTrackinStamp = Array.isArray(value) ? value[1] : null
        } }
      ],
      selectList: {},
      tableLoading: true,
      tableColumns: [
        { prop: '', label: '', type: 'selection' },
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        {
          prop: 'lotId',
          label: this.$t('lotId')
        },
        {
          prop: 'trackinStamp',
          label: this.$t('trackinStamp')
        },
        {
          prop: 'systemTime',
          label: this.$t('systemTime')
        },
        {
          prop: 'holdCode',
          label: this.$t('holdCode')
        },
        {
          prop: 'holdReason',
          label: this.$t('holdReason')
        },
        {
          prop: 'callMESHold',
          label: this.$t('callMESHold'),
          templete: (_scope) => {
            return (
              <span>{_scope.row.callMESHold ? 'call mes hold' : 'not call mes hold'}</span>
            )
          }
        }
      ]
    }
  },
  created() {
    this.initList()
    this.getHoldCode()
  },
  methods: {
    scopedHandle(val) {
      this.dialogFormVisible = true
      this.dialogForm = val
    },
    // 初始化列表
    initList() {
      Apis.getList(this.$clearNull({ ...this.infoForm, ...this.listQuery })).then(res => {
        this.tableData = res.data
        this.total = res.total
        this.tableLoading = false
      })
    },
    // 点击查询
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    // 切换分页
    getList(val) {
      this.tableLoading = true
      this.listQuery = val
      this.initList()
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    // 设置call hold
    getHoldCode() {
      const obj = [
        {
          id: '0',
          name: 'not call mes hold'
        },
        {
          id: '1',
          name: 'call mes hold'
        }
      ]
      this.$set(this.selectList, 'callMESHold', obj)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
</style>
